<template>
  <!-- 登录窗口 -->
  <el-dialog
    class="my-dialog"
    v-model="dialogVisible"
    width="380px"
    top="230px"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <template #header="{ titleId }">
      <div class="my-header">
        <h4 :id="titleId" class="text-2xl text-center font-bold login-title">
          登录
        </h4>
        <el-icon class="my-close-btn" @click="() => (dialogVisible = false)">
          <Close />
        </el-icon>
      </div>
    </template>
    <el-form
      ref="formRef"
      :model="formData"
      label-width="40px"
      :center="true"
      @submit.prevent
    >
      <el-form-item label="" prop="number">
        <el-input
          ref="numberRef"
          v-model="formData.number"
          tabindex="1"
          clearable
          placeholder="请输入工号"
          style="width: 260px"
          @focus="focusNumberRef"
          @keyup.enter.prevent="focusPwRef"
          ><template #prepend> <el-button :icon="User" /> </template
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input
          ref="pwRef"
          v-model="formData.password"
          type="password"
          tabindex="2"
          clearable
          placeholder="请输入密码"
          style="width: 260px"
          show-password
          @focus="focusPwRef"
          @keyup.enter.prevent="login"
          ><template #prepend> <el-button :icon="Key" /> </template
        ></el-input>
      </el-form-item>
      <el-form-item class="my-form-item">
        <el-button class="my-update-btn" text type="primary" @click="update">修改密码</el-button>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="login" style="width: 260px">
          登 录
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <UpdatePassword ref="updateRef" />
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, unref, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { User, Key } from "@element-plus/icons-vue";
import { Login } from "../../api";

import UpdatePassword from "../components/UpdatePassword.vue";

const currentType = ref()
const dialogVisible = ref(false);
const pwRef = ref();
const open = (type: string) => {
  formData.password = "";
  dialogVisible.value = true;
  currentType.value = type
  const userID = localStorage.getItem('USER_ID')
  formData.number = userID || ''
  nextTick(() => {
    if(!formData.number){
      focusNumberRef()
      return
    }
    focusPwRef();
  });
};
defineExpose({ open });

const focusPwRef = () => {
  pwRef.value.focus();
};

const numberRef = ref()
const focusNumberRef = () => {
  numberRef.value.focus();
};

// 记住我
const rememberMe = ref();

const formData = reactive({
  number: "",
  password: "",
});

const emit = defineEmits(["success"]);
const login = () => {
  Login(formData).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    ElMessage.success("登录成功");
    dialogVisible.value = false;
    emit("success", currentType.value);
    localStorage.setItem("USER_ID", formData.number)
  });
  // if (rememberMe.value) {
  //   localStorage.setItem("IS_REMEMBER", formData.user);
  // } else {
  //   localStorage.removeItem("IS_REMEMBER");
  // }
  // ElMessage.success("登录成功");
  // bus.emit('getUser')
  // router.push({ path: '/Home'})
};

const updateRef = ref();
const update = (data: any) => {
  updateRef.value.open(data.FID);
};
</script>
<style scoped lang="less">
.flex {
  display: flex;
  flex-wrap: wrap;
  width: 700px;
  justify-content: space-between;
  align-content: center;
  position: absolute;
  left: 50%;
  margin-left: -350px;

  .my-button {
    width: 200px;
    height: 120px;
    margin: 0;
  }
}

.flex-1 {
  top: 90px;
}

.flex-2 {
  width: 500px;
  top: 260px;
  margin-left: -250px;
  justify-content: space-around;
}

:deep(.flex .el-button > span) {
  font-size: 20px;
}
.login-title {
  color: #409eff;
}
.my-close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  color: #666;
}
:deep(.my-form-item){
  margin: 0;
  margin-top: -16px;
}
:deep(.my-form-item .el-form-item__content){
  margin-left: 228px;
}
.my-update-btn{
  margin-left: 188px;
}
</style>
